<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>
		<style type="text/css">
			th{
				border: 1px palevioletred solid;
			}
			td{
				border: 1px palevioletred solid;
			}
			.del{
				color: blue;
				cursor:pointer;
				
				text-align: center;
			}
		</style>
	</head>
	<body>
		<button onclick="addText()">
			添加行
		</button>
		<!--<button onclick="addRow()">
			添加行
		</button>-->
		<div id="text">
			
		</div>
		<!--静态表格table-->
		<table id="tbody" style="border: 1px palevioletred solid;">
			<!--表头-->
			<header>
				<th width="100px">
					姓名
				</th>
				<th>
					学号
				</th>
				<th>
					班级
				</th>
				<th width="150px">
					操作栏
				</th>
			</header>
			
			<!--表身-->
		    <tr id="tr1">
		        <td width="100px">张三</td>
		        <td>001</td>
		        <td>计算机</td>
		        <td class="del" onclick="del(this)">删除</td>
		        
		        
		    </tr>
		    <tr id="tr2">
		        <td>李四</td>
		        <td>002</td>
		        <td>计算机</td>
		        <td class="del" onclick="del(this)">删除</td>
		        
		    </tr>
		</table>
	</body>
	<script type="text/javascript">
		
		//创建一个文本节点 createTextNode
		//创建一个p标签节点
		function addText(){
//			let oText=document.createTextNode('我是被创建的文本节点')
//			let oTextWrapper=document.getElementById('text')
//			oTextWrapper.appendChild(oText)
//			let oP=document.createElement("p")
//			oP.innerText='我是被创建的p节点'
//			oTextWrapper.appendChild(oP)

			let otd1 = document.createElement("td");
			let otd2 = document.createElement("td");
			let otd3 = document.createElement("td");
			let otd4 = document.createElement("td");
			otd1.innerText = '王五'
			otd2.innerText ='003'
			otd3.innerText ='软件'
			otd4.innerText ='删除'
			otd4.className ='del'
			otd4.setAttribute('onclik','del(this)')
			
			let oTr = document.createElement("tr");
			oTr.appendChild(otd1);
			oTr.appendChild(otd2);
			oTr.appendChild(otd3);
			oTr.appendChild(otd4);
			
			let oTbody = document.getElementsByTagName('tbody')[0]
			oTbody.appendChild(oTr);
				
				
		}
//		function addRow() {
//			let myTable = document.getElementById("tbody");
//			let tr = document.createElement("tr");
// 			let td_1 = document.createElement("td");
//			td_1.innerHTML = "";
// 			tr.appendChild(td_1);
// 			let td_2 = document.createElement("td");
// 			td_2.innerHTML = "00";
// 			tr.appendChild(td_2);
// 			let td_3 = document.createElement("td");
// 			td_3.innerHTML = "";
// 			tr.appendChild(td_3);
// 			let td_4 = document.createElement("td");
// 			td_4.innerHTML = "";
// 			tr.appendChild(td_4);
// 			myTable.appendChild(tr);
//		}
		
		
		
		
		
		
		
		
		function del(e){
			//1  obj.remove();移除自己
//			e.remove()
			//2  obj.removeChild(childNode);
			//3
			console.dir(e.parentNode.parentNode)
			e.parentNode.parentNode.removeChild(e.parentNode)
		}
	</script>
</html>
